<template>
  <section class="login">

    <div class="logo">
      <img src="../../assets/img/logo1.png" alt="">
      <p>{{$t('login.welcome')}}</p>
    </div>
    <div class="login-box">
      <p>
        <select  @change="changeLanguage" v-model="language">
          <option value="zh-CN">{{$t('vux.zhCN')}}</option>
          <option value="en">{{$t('vux.en')}}</option>
        </select>
      </p>
      <form class="form-input">
        <div style="border-bottom: 1px solid #eeeeee">
          <x-input :max="11"  :placeholder="$t('accountLogin')" v-model="phone" name="mobile">
            <!--<i class="iconfont iconfont1" slot="label" >&#xe65a;&nbsp;</i>-->
          </x-input>
        </div>
        <div style="border-bottom: 1px solid #eeeeee" class="passw">
          <x-input :type="seen ? 'text' : 'password'"  :placeholder="$t('pwd')" v-model="pwd">
            <!--<i class="iconfont iconfont1" slot="label">&#xe62d;&nbsp;</i>-->
            <img v-if="seen" src="../../assets/img/open.png" @click="changeType()" slot="right" class="eye_img">
            <img v-else src="../../assets/img/close.png" @click="changeType()" slot="right" class="eye_img">
          </x-input>
        </div>
      </form>
      <div class="remember">
        <span><input type="checkbox" class="input_check" id="check3" v-model="checked"><label for="check3"></label></span>
        <p @click="Checked">{{$t('rember')}}</p>
      </div>
      <x-button :gradients="(pwd && phone) ? buttonActiveColor : buttonColor" @click.native="doLogin" :disabled="(pwd && phone) ? false : true">{{$t('login')}}</x-button>
      <span class="forgot" @click="forgotPwd">{{$t('forget')}}</span>
    </div>
  </section>
</template>

<i18n>
  login:
    en: Login
    zh-CN: 登录
  rember:
    en: Rember
    zh-CN: 记住密码
  forget:
    en: Forgot password
    zh-CN: 忘记密码
  pwd:
    en: Password
    zh-CN: 密码
  accountLogin:
    en: Account or Phone
    zh-CN: 账号 或 手机号码
  login.welcome:
    en: Welcome to log in SAC
    zh-CN: 欢迎登录SAC
</i18n>


<script>
  import {Toast, XInput, XButton} from 'vux'
  export default {
    name: 'login',
    components: {
      XButton,
      XInput,
      Toast
    },
    data () {
      return {
        buttonColor: ['#c5d0d6', '#c5d0d6'],
        buttonActiveColor: ['#537fbf', '#537fbf'],
        phone: '',
        pwd: '',
        seen: '',
        unseenImg: './src/assets/img/close.png',  // 看不见
        seenImg: './src/assets/img/open.png',  // 看得见密码
        checked: false,
        language: localStorage.language ? localStorage.language : 'en'
      }
    },
    // mounted () {
    //   this.keepAlive()
    //   setInterval(this.keepAlive, 10000)
    // },
    created () {
      this.getCookie()
    },
    methods: {
      keepAlive () {
        console.log('alive')
      },
      Checked () {
        if (this.checked === false) {
          this.checked = true
        } else {
          this.checked = false
        }
      },
      doLogin () {
        // 保存的账号
        let name = this.phone
        // 保存的密码
        let pass = this.pwd
        if (name === '' || name === null) {
          this.$vux.toast.text('请输入正确的用户名', 'middle')
          return
        } else if (pass === '' || pass === null) {
          // alert('请输入正确的密码');
          this.$vux.toast.text('请输入正确的密码', 'middle')
          return
        }
        // 判断复选框是否被勾选 勾选则调用配置cookie方法
        if (this.checked === true) {
          // 传入账号名，密码，和保存天数3个参数
          this.setCookie(name, pass, 7)
        } else {
          this.clearCookie()
        }
        // 接口
        let vue = this
        vue.post({
          url: 'api/user/login',
          params: {
            account: vue.phone,
            password: vue.pwd
          },
          success: function (data) {
            if (data.code === 0) {
              vue.$vux.toast.text(data.msg, 'middle')
            } else {
              localStorage.token = data.data.token
              vue.$i18n.set('en')
              localStorage.language = 'en'
              vue.$router.push({path: '/index'})
            }
          }
        })
      },
      forgotPwd () {
        this.$router.push({path: '/forgot'})
      },
      changeType () {
        this.seen = !this.seen // 小眼睛的变化
        this.pwdType = !this.pwdType // 跟着小眼睛变化，密码框隐藏显示文本框，内容就显示了
      },
      // 设置cookie
      setCookie (cName, cPwd, exdays) {
        var exdate = new Date() // 获取时间
        exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) // 保存的天数
        // 字符串拼接cookie
        window.document.cookie = 'userName' + '=' + cName + ';path=/;expires=' + exdate.toGMTString()
        window.document.cookie = 'userPwd' + '=' + cPwd + ';path=/;expires=' + exdate.toGMTString()
      },
      // 读取cookie
      getCookie () {
        if (window.document.cookie.length > 0) {
          var arr = window.document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下
          console.log(arr)
          for (var i = 0; i < arr.length; i++) {
            var arr2 = arr[i].split('=') // 再次切割// 判断查找相对应的值
            if (arr2[0] === 'userName') {
              this.phone = arr2[1] // 保存到保存数据的地方
            } else if (arr2[0] === 'userPwd') {
              this.pwd = arr2[1]
            }
          }
        }
      },
      // 清除cookie
      clearCookie: function () {
        this.setCookie('', '', -1) // 修改2值都为空，天数为负1天就好了
      },
      changeLanguage () {
        this.$i18n.set(this.language)
        localStorage.language = this.language
      }
    }
  }
</script>

<style lang="less" >
  .login {
    height: 100%;
    background-color: #fff;
    padding: 0.4rem;
    box-sizing: border-box;
    .login-box>p{
      padding-left: 0.2rem;
    }
    .login-box>p>select{
      background-color: #537fbf;
      color: white;
      padding: 0.08rem;
      font-size: 0.3rem;
      box-shadow: 0rem 0.1rem 0.1rem 0rem
      rgba(30, 114, 169, 0.13);
    }
    /*.login-box>p>select option{*/
      /*line-height: 5rem;*/
    /*}*/
    .logo {
      text-align: center;
      padding-top:1.4rem;
      padding-bottom: 0.4rem;
      img{
       width: 90%;
        margin-left: 0;
        display: block;
      }
      p{
        font-size: 0.32rem;
        color: #b3bcc1;
        font-weight: bold;
        text-align: left;
        padding-left: 0.2rem;
        padding-top: 0.5rem;
      }
    }
    .form-input {
      padding: 15px 0;
      padding-top: 10px;
      div{
        .vux-x-input{
          height: 0.5rem;
          padding-left: 0rem;
          padding-bottom: 0.1rem;
          padding-top: 0.6rem;
          font-size: 0.26rem;
          input{
            height: 0.5rem;
          }
          input::-webkit-input-placeholder {
            color: #c6cfd6 !important;
            font-size: 0.28rem;
          }
        }
        .iconfont1{
          border-right:1px solid #dddddd ;
          font-size: 0.33rem;
        }
        img{
          width:20px;
          height:15px;
        }

      }
      .passw .weui-cell__ft i{
        display: none;
      }

    }
    .weui-btn{
      border-radius: 0px !important;
    }
    .forgot {
      display: inline-block;
      color: #0084f4;
      /*float: right;*/
      padding-top:0.4rem;
      padding-bottom: 1rem;
      font-size: 0.24rem;
    }
    .register1 {
      padding-top: 0.6rem;
      text-align: center;
      color: #999999;
      border-radius: 0.05rem;
      font-size: 0.26rem;

      span{
        color: #537fbf;
      }
    }
    .remember {padding-bottom:0.7rem;padding-left: 0.12rem;float: left}
    .remember>span {position: relative;float: left;top: 0.1rem}
    .remember .input_check {position: absolute;visibility: hidden;}
    .remember .input_check+label {display: inline-block;width: 12px;height: 12px;border: 1px solid #b4b5b9;}
    .remember .input_check:checked+label{
      background-color:#ffffff;
    }
    .remember .input_check:checked+label:after {
      content: "";
      position: absolute;
      left: 1px;
      bottom: 10px;
      width: 8px;
      height: 4px;
      border: 2px solid #b4b5b9;
      border-top-color: transparent;
      border-right-color: transparent;
      -ms-transform: rotate(-60deg);
      -moz-transform: rotate(-60deg);
      -webkit-transform: rotate(-60deg);
      transform: rotate(-45deg);}

  }
  .remember p{
    float: left;
    margin-top: 0.06rem;
    margin-left: 0.2rem;
    line-height: 1.2;
    color: #c6cfd6;
  }
</style>
